<!--
  业务对象库 树节点新增/编辑 表单组件
-->
<template>
  <el-form :model="featureForm" label-width="120px" size="small">
    <el-row v-show="operType === 'add'">
      <el-col :span="20">
        <el-form-item label="节点类型">
          <el-radio-group v-model="featureForm.type" @input="valueChangeHandler">
            <el-radio name="feature" label="feature">业务对象</el-radio>
            <el-radio name="directory" label="directory">目录</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="operType === 'add'">
      <el-col :span="20">
        <el-form-item label="父节点">
          <el-input v-model="parentLabel" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="nameInputShow">
      <el-col :span="20">
        <el-form-item label="名称">
          <el-input v-model="featureForm.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-form-item label="显示名称">
          <el-input v-model="featureForm.label"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: "FeatureForm",
  props: {
    parentLabel: {
      type: String
    },
    name: {
      type: String
    },
    label: {
      type: String
    },
    operType: {
      type: String    // 操作类型
    },
    type: {
      type: String    // 节点类型 目录 directory, 业务特征 feature
    }
  },
  data() {
    return {
      featureForm: {
        type: 'feature',
        name: '',
        label: ''
      },
      nameInputShow: true,
    }
  },
  methods: {
    initFormData() {
      this.featureForm.name = this.name;
      this.featureForm.label = this.label;
    },

    takeFormData() {
      return { ...this.featureForm };
    },

    // 单选框选项修改
    valueChangeHandler(val) {
      this.nameInputShow = val === "feature";
    },

    setNameInputShow() {
      debugger
      console.log("this type ===", this.type);
      this.nameInputShow = this.type === "feature";
    }

  },

  created() {
    this.initFormData();
    this.setNameInputShow();
  }
}
</script>

<style scoped></style>